<template>
  <el-container direction="vertical" id="department">
    <el-header>
      <h3>部门管理</h3>
    </el-header>

    <el-main>
      <div class="block-wrap" v-loading="loading">
        <div class="header">
          <el-button icon="el-icon-plus" class="margin-b-15" type="primary" size="small" @click="addDepart('add')">添加部门</el-button>
          <el-input class="width310 margin-b-15" v-model="searchForm.keyword" clearable placeholder="请输入关键字搜索" size="small">
            <el-button slot="append" @click="showList(true)"><i class="el-icon-search"></i>&nbsp;搜索</el-button>
          </el-input>
        </div>
        <el-table :data="tableData" ref="table" border stripe>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="code" label="部门编码">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
          </el-table-column>
          <el-table-column prop="number" label="员工数量">
          </el-table-column>
          <el-table-column label="操作" width="150" align="left">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="check(scope.row)">详 情</el-button>
              <el-button type="text" size="small" @click="addDepart('edit',scope.row)">编 辑</el-button>
              <el-button type="text" size="small" @click="deletes(scope.row)">删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          class="margin-t-15"
          :current-page="$store.state.pagination.pageNum"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" background>
        </el-pagination>
      </div>

      <!-- 添加弹出框 -->
      <el-dialog :title="tempOperateType == 'add'?'添加部门':'编辑部门'" :visible.sync="dialogFormVisible" width="440px"
      :close-on-click-modal="false">
        <el-form :model="departForm" label-suffix="：" size="small" ref="departForm" :rules="rules">
          <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="departForm.name" autocomplete="off" placeholder="请输入部门名称，8字以内"></el-input>
          </el-form-item>
          <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
            <el-input v-model="departForm.code" autocomplete="off" placeholder="请输入部门编码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer align-center">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm('departForm')">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 查看弹出框 -->
      <el-dialog title="查看部门" :visible.sync="dialogTableVisible" width="721px"
      :close-on-click-modal="false">
        <h4 class="inline text-16">客服部</h4>
        <small class="margin-l-20 margin-r-10 text-2 text-14">编号：123456</small>
        <small class="margin-r-10 text-2 text-14">创建时间：2019-09-09  09:00</small>
        <p class="text-1 padding-t-15 border-line">部门成员</p>
        <el-table :data="gridData">
          <el-table-column property="date" label="工号"></el-table-column>
          <el-table-column property="name" label="姓名"></el-table-column>
          <el-table-column property="address" label="电话" width="150"></el-table-column>
          <el-table-column property="address" label="是否是管理员"></el-table-column>
          <el-table-column property="address" label="备注"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer align-center">
          <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    data () {
      return {
        loading:false,
        tempOperateType: "add",
        tableData:[],

        searchForm:{
          keyword:null
        },

        dialogFormVisible:false,//添加控制器
        formLabelWidth: '95px',
        departForm:{
          name:"",
          code:""
        },
        total: 0,//分页总数
        dialogTableVisible:false,//查看控制器
        checkForm:{
          name:"",
          code:"",
          creatTime:""
        },//查看详情表单
        gridData:[],
        rules:{
          name: [{ required: true, message: '请输入部门名称', trigger: 'change' },
                        { max: 8, message: '最长8个字符', trigger: 'blur' }],
          code: [{ required: true, message: '请输入部门编码', trigger: 'change' }]
        }
      }
    },
    mounted () {
      this.showList(true)
    },
    methods: {
      handleCurrentChange (val) {
        this.$store.commit('changePage', val)
        this.showList(false)
      },
        /**
         * 显示列表
         */
        showList(init){
          if(init){
            this.$store.commit("changePage", 1)
          }
          let config = {
            method: "post",
            url:"meeting/department/showDepartment",
            data: this.searchForm
          }
          config.data.admin_id = sessionStorage.getItem('admin_id')
          config.data.p = this.$store.state.pagination.pageNum
          this.loading = true
          this.$axios(config).then(res => {
            this.tableData = res.data.data
            this.total = res.data.total
            this.loading = false
          }).catch(err => {
            this.$message.error(err.msg)
            this.loading = false
          })
        },
        /**
         * 新增和编辑
         * type是类型，data是数据
         */
        addDepart(type, data){
          this.tempOperateType = type
          if(type == 'add'){
            this.departForm = {
              name:null,
              code:null
            }
          }else{
            this.departForm = {
              name: data.name,
              code: data.code,
              department_id: data.department_id
            }
          }
          this.dialogFormVisible = true
          this.$nextTick(_ => {
            this.$refs.departForm.clearValidate()
          })
        },
        
        /**
         * 提交表单
         * 确认按钮
         */
        confirm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let submitData = this.$common.deepCopy(this[formName])
              let config = {
                method: "post",
                url:'',
                data: submitData
              }
              if(this.tempOperateType == "add"){
                config.url = "meeting/department/createDepartment"
              }else{
                config.url = "meeting/department/editDepartment"
              }
              config.data.admin_id = sessionStorage.getItem('admin_id')
              this.$axios(config).then(res => {
                this.$message.success(res.msg)
                this.dialogFormVisible = false
                this.showList(false)
              }).catch(err => {
                this.$message.error(err.msg)
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        /**
         * 查看按钮
         */
        check(row){
          let config = {
            method: "post",
            url: "meeting/department/detailDepartment",
            data: {department_id: row.department_id}
          }
          this.$axios(config).then(res => {
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
          this.dialogTableVisible = true

        },
        /**
         * 删除部门
         * 
         */
        deletes(row){
          this.$confirm('是否删除该部门?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let config = {
              method: "post",
              url: "meeting/department/deleteDepartment",
              data: {department_id: row.department_id}
            }
            this.$axios(config).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.showList(false)
            }).catch(err => {
              console.log(err)
            })
          }).catch(() => {

          });
        }
      }
  }
</script>
<style type="text/css" scoped lang="less">
  .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .inline{
    display: inline-block;
  }
  .margin-l-20{
    margin-left: 20px;
  }
  .margin-r-10{
    margin-right: 10px;
  }
  .border-line{
    border-top: 1px solid #E8E8E8;
  }
  .width310{
    width: 310px;
  }
  
</style>
<style type="text/css" lang="less">
  #department{
    .el-dialog__body{
      padding:30px 60px;
    }
  }

</style>